<template>
  <view>
    <image class="avatar" src="/static/public/hotel.png"/>
    <view style="padding: 0 30rpx">
      <view class="info">
        <view class="title">姓名</view>
        <view class="right">张蔷薇</view>
      </view>
      <view class="info">
        <view class="title">性别</view>
        <view class="right">女</view>
      </view>
      <view class="info">
        <view class="title">联系方式</view>
        <view class="right">19928765789</view>
      </view>
      <view class="intro">
        <view>简介</view>
        <view class="tt">
          张蔷薇，资深持证导游，十年从业经验，擅长西
          藏、川藏线及滇藏线路。她嗓音温柔、讲解生动，
          能将风景背后的历史与人文娓娓道来。熟悉高原行
          程安排，细心体贴，擅长应对突发状况，是许多游
          客心中“最安心的旅伴”。跟着张导，一路不仅有风
          景，更有故事与温度。
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss">
page {
  background-color: white;
}

.avatar {
  width: 750rpx;
  height: 750rpx;
}

.title {
  margin-top: 30rpx;
  position: relative;
  padding-left: 20rpx;
  font-size: 32rpx;
  line-height: 40rpx;
}

.title::after {
  content: "";
  width: 8rpx;
  height: 30rpx;
  background-color: #61916f;
  position: absolute;
  left: 0;
  top: 5rpx;
  border-radius: 99rpx;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .right {
    color: gray;
  }
}
.intro{
  margin-top: 30rpx;
  background-color: #F6F6F6;
  padding: 20rpx;
  border-radius: 20rpx;

  .tt{
    color: gray;
    margin-top: 10rpx;
  }
}
</style>
